<template>
	<view>
		<!-- :style="{paddingBottom: iphone + 'rpx'}" -->
		<view style="width: 100vw;">
			<view class="tabbar bg-white flex-cb"  :class="{tabbar2:iphone}">
				<view v-for="(item,index) in tab" :key="index" @click="handletab(item.url)" >
					<image :src="item.icon" mode="" v-if="index == istab "></image>
					<image :src="item.iconS" mode="" v-else></image>
					<text :class="{aqua:index== istab}">{{item.text}}</text>
					<view class='icon flex-c' v-if="num !=0&&index==2">{{num}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tabbar",
		props:{
			isTab:{
				type:Number,
				default:0,
			},
			num:{
				type:Number,
				defaults:0
			}
			
		},
		data() {
			return {
				istab:0,
				iphone:0,
				tab:[
					{
						text:'首页',
						icon:'/static/pageA/11.png',
						iconS:'/static/pageA/1.png',
						url:'index'
					},
					{
						text:'管理',
						icon:'/static/pageA/22.png',
						iconS:'/static/pageA/2.png',
						url:'admin'
					},
					{
						text:'订单',
						icon:'/static/pageA/33.png',
						iconS:'/static/pageA/3.png',
						url:'order'
					},
					{
						text:'设置',
						icon:'/static/pageA/44.png',
						iconS:'/static/pageA/4.png',
						url:'setup'
					}
					
				]
			};
		},
		created(){
			this.istab = this.isTab
			this.iphone = getApp().globalData.iphone
		},
		methods:{
			handletab(url){
				console.log(this.isTab);
				if(getApp().globalData.isgoto != url){
					uni.redirectTo({
						url:'/pageA/' + url
					})
					getApp().globalData.isgoto = url
				}
			},
			
		}
	}
</script>

<style lang="scss" >
.tabbar{
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	width: 750rpx;
	height: auto;
	padding: 14rpx 60rpx;
	view{
		width: 44rpx;
		text-align: center;
		position: relative;
		image{
			width: 42rpx;
			height: 42rpx;
		}
		text{
			width: 44rpx;
			white-space: nowrap;
			font-size: 22rpx;
		}
		.aqua{
			color: #1CD699;
		}
		.icon{
			color: #fff;position: absolute;right: -10rpx;top: -10rpx;
			width: 30rpx;height: 30rpx;border-radius: 50%;
			background: red;font-size: 18rpx;
		}
	}
}
.tabbar2{
	padding: 14rpx 60rpx 80rpx 60rpx;
}
</style>